<template>
  <div class="market">
    <div class="Ttitle flex flex-between">
      <p class="title">权益超市</p>
      <p class="more">更多</p>
    </div>
    <van-tabs v-model="activeName" title-active-color="#2F97FF" color="#2F97FF" @click="onTabClick">
      <van-tab v-for="(item,index) in titleArray" :key="index" :title=item :name=item>
        <single-item :market="currentList"></single-item>
        <van-empty v-show="nothing" image="search" description="暂无可兑换的会员卡" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {allMarketItemList} from '@/data/market'
import SingleItem from "../market/singleItem";

import Vue from 'vue';
import {Tab, Tabs,Empty} from 'vant';

Vue.use(Empty);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "homeMarket",
  components: {SingleItem},
  data() {
    return {
      titleArray: ["精选", "文娱", "美食", "出行", "健康", "购物", "教育"],
      allMarketItemList,
      currentList: this.init(), //当前tab列表
      activeName: '精选',
      nothing: false
    }
  },
  methods: {
    onTabClick(title) {
      this.nothing = false;
      this.currentList = []
      if (title === "精选") {
        let cu = allMarketItemList.filter(function (n) {
          return n.isFeature === true
        })
        this.currentList.push(...cu)
      } else {
        let cu = allMarketItemList.filter(function (n) {
          return n.type === title
        })
        this.currentList.push(...cu)
      }
      if (this.currentList.length === 0) this.nothing = true;
    },
    init() {
      var initList = [];
      let cu = allMarketItemList.filter(function (n) {
        return n.isFeature === true
      })
      initList.push(...cu)
      return initList;
    },
  },
  computed: {}
}
</script>

<style scoped>
.market {
  margin-top: .53rem;
}

.Ttitle {
  margin: 0 .37rem;
}

.title {
  font-size: .43rem;
  font-weight: 500;
  color: #333333;
  line-height: .59rem;
}

.more {
  font-size: 0.32rem;
  font-weight: 400;
  color: #999999;
  line-height: .45rem;
}

</style>